<template>
  <div class="page">
    <div class="form-item">
        <div class="form-item-label">
            input:
        </div>
        <ekInput v-model="inputText"  class="mtop"></ekInput>
        <ekInput v-model="inputText2" :disabled="true" class="mtop"></ekInput>
        <ekInput v-model="inputText3" :clearable="false" class="mtop"></ekInput>
    </div>
    <div class="form-item">
      <div class="form-item-label">
          radio:
      </div>
      <ekRadio v-model="radioText" remote="/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE"  class="mtop"></ekRadio>
      <ekRadio v-model="radioText1" remote="/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE" :disabled="true" class="mtop"></ekRadio>
      <ekRadio v-model="radioText2" :options="options" class="mtop"></ekRadio>
      <ekRadio v-model="radioText3" :options="options" class="mtop"></ekRadio>
      <ekRadio v-model="radioText4" :options="options4" class="mtop"></ekRadio>
    </div>
    <div class="form-item">
      <div class="form-item-label">
          checkbox:
      </div>
      <ekCheckbox v-model="checkboxText.data" remote="/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE"  class="mtop"></ekCheckbox>
      <ekCheckbox v-model="checkboxText1.data" remote="/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE" :disabled="true" class="mtop"></ekCheckbox>
      <ekCheckbox v-model="checkboxText.data"  :options="options" class="mtop"></ekCheckbox>
      <ekCheckbox v-model="checkboxText1.data"  :options="options" :disabled="true" class="mtop"></ekCheckbox>

    </div>
    <div class="form-item">
      <div class="form-item-label">
          switch:
      </div>
      <ekSwitch v-model="switchText"  class="mtop"></ekSwitch>
      <ekSwitch v-model="switchText1" :disabled="true" class="mtop"></ekSwitch>

    </div>
    <div class="form-item">
      <div class="form-item-label">
          select:
      </div>
      <ekSelect v-model="selectText" remote="/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE" class="mtop"></ekSelect>
      <ekSelect v-model="selectText1" remote="/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE" :disabled="true" class="mtop"></ekSelect>
      <ekSelect v-model="selectText" :options="options" class="mtop"></ekSelect>
      <ekSelect v-model="selectText1" :options="options" :disabled="true" class="mtop"></ekSelect>

    </div>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, reactive, ref} from "vue";
import { useStore } from "vuex";
import {useRouter} from 'vue-router'
import ekInput from "@/components/form/ekInput/index.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekCheckbox from "@/components/form/ekCheckbox/index.vue";
import ekSwitch from "@/components/form/ekSwitch/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http } = globalProperties;
const store = useStore();
const router = useRouter();

let inputText = ref('');
let inputText2 = ref('默认值');
let inputText3 = ref('');
setTimeout(()=>{
  inputText3.value = '延迟默认值';
})

let radioText = ref('');
let radioText1 = ref('1');
let radioText2 = ref();
let options = [
  {
    label: '选项1',
    value: '1'
  },
  {
    label: '选项2',
    value: '2'
  }
]
let radioText3 = ref('');
setTimeout(()=>{
  radioText3.value = '2';
})
let radioText4 = ref('2');
let options4  = reactive([]);
setTimeout(()=>{
  // 是否要支持这样的场景
   options4.push(...[
    {
      label: '选项1',
      value: '1'
    },
    {
      label: '选项2',
      value: '2'
    }
  ])
},2000)

let checkboxText = reactive({
  data:[]
});
let checkboxText1= reactive({
  data:['1']
});

let switchText = ref();
let switchText1 = ref('1');
let selectText = ref();
let selectText1 = ref('1');
onMounted(() => {
 
});
</script>
<style scoped lang="scss">
.page {
  padding: 20px;
  background-color: #f4f4f4;
  .form-item {
    .form-item-label {
        text-align: left;
        padding: 5px;
    }
  }
  .mtop {
    margin-top: 4px;
  }
}
</style>
